import { memo, useState } from 'react';
import type { ReactNode, FC } from 'react';
import { CatListHeadWrapper } from './style';
import { shallowEqualApp, useAppDispatch, useAppSelector } from '@/store/hooks';
import CatListItem from '../catList-item';
import { setCurrentCat } from '../../store/songs';
interface IProps {
  children?: ReactNode;
}

const CatListHead: FC<IProps> = (props) => {
  const [isVb, setIsVb] = useState(false);
  const dispatch = useAppDispatch();
  const { catList, currentCat } = useAppSelector(
    (state) => ({
      catList: state.songs.catList,
      currentCat: state.songs.currentCat,
    }),
    shallowEqualApp
  );
  return (
    <CatListHeadWrapper>
      <span>{currentCat || '全部'}</span>
      <div className="ctrl">
        <a
          className="btn sprite_button stCatList"
          onClick={(e) => {
            e.preventDefault();
            setIsVb(!isVb);
          }}
        >
          <i className="sprite_button">
            选择分类&nbsp;&nbsp;
            <em className="icons"></em>
          </i>
        </a>
        <a href="" className="btn sprite_button2 hot">
          热门
        </a>
      </div>
      <div className={'catList ' + (isVb ? 'isVb' : '')}>
        <div className="hd sltlyr"></div>
        <div className="bg sltlyr">
          <h3>
            <a
              onClick={(e) => {
                e.preventDefault();
                dispatch(setCurrentCat(''));
              }}
              className="sprite_button2"
            >
              全部风格
            </a>
          </h3>
          {Object.entries(catList).map(([keys, values]: [string, any], index) => {
            return <CatListItem name={keys} Lists={values} key={index} />;
          })}
        </div>
        <div className="ft sltlyr"></div>
      </div>
    </CatListHeadWrapper>
  );
};

export default memo(CatListHead);
